<template>
  
        <div class="img-preview-box">
          <img 
            class="img-item"
            :class="{ 'cur-img': curId === item.id }"
            :style="{ left: `${100 + 90 * item.id}px` }"
            :src="item.url"
            v-for="item in list"
            :key="item.id"
            @click="onPreview(item)"
          />
         <div class="img-title">{{ title }}</div>
          <div class="arrow-icon-box">
            <div class="arrow-icon" @click="onChange('reset')">RESET</div>
            <div class="arrow-icon" @click="onChange('last')">&lt; LAST</div>
            <div class="arrow-icon" @click="onChange('next')">NEXT &gt;</div>
          
		  </div>
          <div class="text">药材展示</div>
        </div>
  
</template>
<script>
export default {
	
	 data() {
	        return {
				direction:"",
	          curId: 0,
	          title: "",
			  start:null,
	          list: [
	            { id: 1, url: require('../assets/m8.png'), title: "白茯苓" },
	            { id: 2, url: require('../assets/m2.png'), title: "陈皮" },
				 { id: 3, url: require('../assets/m3.png'), title: "人参" },
				  { id: 4, url: require('../assets/m4.png'), title: "冬虫夏草" },
				   { id: 5, url: require('../assets/m5.png'), title: "鹿茸" },
				     { id: 6, url: require('../assets/m6.png'), title: "肉桂" },
	          ],
	        };
	      },
		  mounted() {
		  	this.timeout()
		  },
	       methods: {
			  // 定时
			 timeout(){
				 this.start = setInterval(()=>{
					
					 this.onChange()
					
				 },2000)
				 
			 },
	        onPreview({ id, title }) {
	          this.curId = id;
	          this.title = title;
	        },
	        onChange(direction) {
			
	          if (direction === "reset") {
	            this.curId = 0;
	          } else if (direction === "last") {
	            // 上一张
	            if (this.curId === 1 || this.curId === 0) {
	              this.curId = 6;
	            } else {
	              this.curId -= 1;
	            }
	          } else {
	            // 下一张
	            if (this.curId === 6 || this.curId === 0) {
	              this.curId = 1;
	            } else {
	              this.curId += 1;
	            }
	          }
	          if (["last", "next"].includes(direction)) {
	            this.title = this.list.filter(
	              (item) => item.id === this.curId
	            )[0].title;
	          } else {
	            this.title = "";
	          }
			
	        }
			
	      },
  }
</script>
<style lang="less" scoped>

      .img-preview-box {
        height: 100vh;
        position: relative;
        perspective: 900px;
		
        // background: #000;
      }
      .img-item {
        width: 400px;
        height: 260px;
		
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotateY(45deg);
        opacity: 0.8;
        transition: all 0.4s;
        cursor: pointer;
        z-index: 1;
        box-shadow: -5px 5px 20px 5px rgba(0, 0, 0, 0.2);
      }
      .cur-img {
        left: 800px !important;
        z-index: 2;
        opacity: 1;
        transform: translateY(-50%) rotateY(0) scale(1.5);
      }
      .img-title {
        // color: #fff;
		color: #000;
        font-size: 24px;
        font-weight: bold;
        position: absolute;
        bottom: 120px;
        left: 950px;
      }
      .arrow-icon-box {
        position: absolute;
        right: 100px;
        bottom: 60px;
        display: flex;
      }
      .arrow-icon {
        color: #999;
        border: 1px solid #999;
        margin-right: 5px;
        padding: 10px 20px;
        cursor: pointer;
        user-select: none;
      }
      .arrow-icon:hover {
        color: #fff;
        background-color: #999;
      }
      .text {
        color: rgb(221, 221, 221);
        font-size: 100px;
        font-weight: bold;
        text-align: center;
        // opacity: 0.2;
        cursor: default;
      }
</style>